<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>分布表单</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
    <style>
        .step-item-tail i {
            background-color: #2d8cf0 !important;
        }

        .lay-step {
            width: 80% !important;
            padding-left: 3%;
        }
        .hidden{
            display: none;
        }

        tip {
            display: inline-block;
            margin-left: 10px;
            font-size: 12px;
            color: #a29c9c;
            margin-top: 8px;
        }
    </style>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card">
                <div class="layui-card-body" style="padding-top: 40px;min-height: calc(100vh - 76px)">
                    <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
                        <div carousel-item>
                            <div>
                                <form class="layui-form" action="javascript:void(0);" lay-filter="form1"
                                      style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                    <input type="hidden" name="id" th:value="${data.id}">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">实例</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="name" placeholder="请输入" class="layui-input"
                                                   readonly>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">连接驱动</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="className" placeholder="请输入" class="layui-input"
                                                   readonly>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">主机</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="host" placeholder="请输入" class="layui-input"
                                                   readonly>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">端口</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="port" placeholder="请输入" class="layui-input"
                                                   readonly>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">用户</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="username" placeholder="请输入" class="layui-input"
                                                   readonly>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">密码</label>
                                        <div class="layui-input-block">
                                            <input type="password" name="password" placeholder="请输入"
                                                   class="layui-input" readonly>
                                        </div>
                                    </div>
                                    <div class="layui-form-item connect-box" style="display: none">
                                        <div class="layui-input-block">
                                            <div style="display: flex; align-items: center">
                                        <span style="font-size: 20px; color: #1890ff;display: none"
                                              class="connect-success">
                                            <p style="display: inline;">连接成功</p>
                                            <i class="layui-icon"
                                               style="color: #1890ff;font-size: 24px; margin-left: 5px">&#xe6af;</i>
                                        </span>
                                                <span style="font-size: 20px; color: #FF5722;margin-left: 15px;display: none"
                                                      class="hidden connect-error">
                                            <p style="display: inline;">连接失败</p>
                                            <i class="layui-icon"
                                               style="color: #FF5722; font-size: 24px; margin-left: 5px">&#xe69c;</i>
                                        </span>
                                            </div>
                                            <!-- 提示信息 -->
                                            <div class="connect-error-text" style="color: #FF5722; margin-top: 15px">

                                            </div>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button class="layui-btn layui-btn-md layui-btn-normal layui-connect"
                                                    lay-submit lay-filter="connectBtn">
                                                &emsp;测试连接&emsp;
                                            </button>
                                            <button class="step1-next layui-btn layui-btn-md layui-btn-normal layui-btn-disabled"
                                                    disabled="disabled" lay-submit lay-filter="formStep">
                                                &emsp;下一步&emsp;
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div>
                                <form class="layui-form" action="javascript:void(0);" lay-filter="form2"
                                      style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">数据库</label>
                                        <div class="layui-input-block">
                                            <select name="database" id="database" lay-verify="required" lay-text="请选择数据库"
                                                    lay-filter="database" lay-search>
                                                <option value="" selected>请选择</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">备份范围</label>
                                        <div class="layui-input-block">
                                            <input type="radio" name="backupType" value="0" title="全库备份" checked
                                                   lay-filter="backupType">
                                            <input type="radio" name="backupType" value="1" title="单表备份"
                                                   lay-filter="backupType">
                                        </div>
                                    </div>
                                    <div class="layui-form-item tables">
                                        <label class="layui-form-label">数据表</label>
                                        <div class="layui-input-block tables-div"
                                             style="max-height: 250px; overflow-y: auto; display: flex; flex-direction: column; align-items: flex-start">
                                            <span style="color: #999999; line-height: 36px">暂无数据</span>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button class="layui-btn layui-btn-md layui-btn-primary pre">
                                                &emsp;上一步&emsp;
                                            </button>
                                            <button class="layui-btn layui-btn-md layui-btn-normal" lay-submit lay-filter="formStep2">
                                                &emsp;下一步&emsp;
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div>
                                <form class="layui-form" style="margin: 0 auto; max-width: 500px; padding-top: 40px" lay-filter="form3">
                                    <div class="layui-form layuimini-form">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label required">导出方式</label>
                                            <div class="layui-input-block">
                                                <input type="checkbox" name="structure" title="表结构" checked>
                                                <input type="checkbox" name="data" title="表数据" checked>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label required">备份方式</label>
                                            <div class="layui-input-block">
                                                <input type="radio" name="categoryEnum" value="MANUAL" title="立即备份" checked lay-filter="categoryEnum">
                                                <input type="radio" name="categoryEnum" value="AUTO" title="定时备份" lay-filter="categoryEnum">
                                            </div>
                                        </div>
                                        <div class="layui-form-item hidden auto-backup" >
                                            <label class="layui-form-label required">定时时间</label>
                                            <div class="layui-input-block">
                                                <select name="cron" lay-search>
                                                    <option value=""></option>
                                                    <option value="8">每一分钟执行一次</option>
                                                    <option value="1">每半小时执行一次(整点和半点触发)</option>
                                                    <option value="2">每小时执行一次(整点触发)</option>
                                                    <option value="3">每天中午12点执行</option>
                                                    <option value="4">每周一中午12点执行</option>
                                                    <option value="5">每月1号中午12点执行</option>
                                                    <option value="6">每月15号中午12点执行</option>
                                                    <option value="7">每月最后一天中午12点执行</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="layui-form-item hidden auto-backup">
                                            <label class="layui-form-label required">是否启动</label>
                                            <div class="layui-input-block">
                                                <input type="checkbox" name="status" lay-text="是|否" lay-skin="switch" value="1">
                                            </div>
                                        </div>
                                        <div class="layui-form-item hidden auto-backup">
                                            <label class="layui-form-label">备注</label>
                                            <div class="layui-input-block">
                                                <textarea name="remark" placeholder="请输入" class="layui-input" style="resize: none; min-height: 100px"></textarea>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label required">是否压缩</label>
                                            <div class="layui-input-block" style="display: flex; align-items: center">
                                                <input type="checkbox" name="isCompress" lay-text="是|否" lay-skin="switch" value="true">
                                                <tip>将被压缩成zip格式的文件，提升备份速度</tip>
                                            </div>
                                        </div>
<!--                                        <div class="layui-form-item">-->
<!--                                            <label class="layui-form-label required">是否上传</label>-->
<!--                                            <div class="layui-input-block" style="display: flex; align-items: center">-->
<!--                                                <input type="checkbox" name="isUpload" lay-text="是|否" lay-skin="switch" value="true" lay-filter="isUpload">-->
<!--                                                <tip>将上传至文件服务器</tip>-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                        <div class="layui-form-item">-->
<!--                                            <label class="layui-form-label required">是否删除</label>-->
<!--                                            <div class="layui-input-block" style="display: flex; align-items: center">-->
<!--                                                <input type="checkbox" name="isDelete" lay-text="是|否" lay-skin="switch" value="true" lay-filter="isDelete">-->
<!--                                                <tip>将删除磁盘上的备份文件，取决于是否开启上传</tip>-->
<!--                                            </div>-->
<!--                                        </div>-->
                                        <div class="layui-form-item">
                                            <div class="layui-input-block">
                                                <button class="layui-btn layui-btn-md layui-btn-primary pre">
                                                    &emsp;上一步&emsp;
                                                </button>
                                                <button class="layui-btn layui-btn-md layui-btn-normal backup-btn" lay-submit lay-filter="saveBtn">
                                                    &emsp;提交&emsp;
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div>
                                <div style="text-align: center;margin-top: 90px;">
                                    <i class="layui-icon layui-circle"
                                       style="color: white;font-size:30px;font-weight:bold;background: #1890ff;padding: 20px;line-height: 80px;">&#xe605;</i>
                                    <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
                                        备份成功
                                    </div>
                                    <div style="font-size: 14px;color: #666;margin-top: 20px;">请在备份记录中查看</div>
                                </div>
                                <div style="text-align: center;margin-top: 50px;">
                                    <button class="layui-btn layui-btn-normal repeat-backup">&emsp;重新备份&emsp;</button>
                                    <button class="layui-btn layui-btn-primary close-page">&emsp;关闭&emsp;</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script type="text/javascript" th:inline="javascript">
    layui.use(['form', 'step', 'code', 'element'], function () {
        var $ = layui.$,
            form = layui.form,
            step = layui.step;

        // 初始化赋值
        form.val("form1", [[${data}]]);
        // 当前库名
        let currentDatabase = '';
        // 当前备份类型
        let currentType = '';


        // 测试连接
        form.on('submit(connectBtn)', function (data) {
            $.ajax({
                url: '/backup/node/info/connect',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: "application/json;charset=utf-8",
                type: 'post',
                success: function (result) {
                    if (result.code === 200) {
                        layer.msg(result.message, {icon: 1, time: 1800});
                        $('.connect-success').addClass('display', '');
                        $('.connect-box').addClass('display', '');
                        $('.layui-connect').addClass('layui-btn-disabled');
                        $('.layui-connect').attr('disabled', 'disabled');
                        $('.step1-next').removeClass('layui-btn-disabled');
                        $('.step1-next').removeAttr('disabled');
                        $('.connect-error-text').css('display', 'none');
                        $.ajax({
                            url: '/backup/node/info/listDatabases',
                            data: JSON.stringify(data.field),
                            dataType: 'json',
                            contentType: "application/json;charset=utf-8",
                            type: 'post',
                            success: function (result) {
                                let database = result.data;
                                if (0 < database.length) {
                                    $('#database').html('<option value="" selected>请选择</option>');
                                    for (let i = 0, len = database.length; i < len; i++) {
                                        $("#database").append('<option value="' + database[i] + '">' + database[i] + '</option>');
                                    }
                                    form.render("select");
                                }
                            },
                        });
                    } else {
                        layer.msg(result.message, {icon: 2, time: 1800});
                    }
                }
            })
            return false;
        });


        // 数据库选择
        form.on('select(database)', function (data) {
            let value = data.value;
            currentDatabase = value;
            if (value) {
                if (1 == currentType) {
                    // 获取表信息
                    let properties = [[${data}]];
                    properties.database = currentDatabase;
                    $.ajax({
                        url: '/backup/node/info/listTables',
                        data: JSON.stringify(properties),
                        dataType: 'json',
                        contentType: "application/json;charset=utf-8",
                        type: 'post',
                        success: function (result) {
                            let tables = result.data;
                            if (0 < tables.length) {
                                $('.tables-div').html('');
                                for (let i = 0, len = tables.length; i < len; i++) {
                                    $('.tables-div').append('<input type="checkbox" value="' + tables[i] + '" title="' + tables[i] + '">');
                                }
                                form.render("checkbox");
                            }
                        },
                    });
                }
            } else {
                $('.tables-div').html('');
            }
        })

        // 备份类型选择
        form.on('radio(backupType)', function (data) {
            let value = data.value;
            currentType = value;
            // 全库备份
            if (0 == value) {
                $('.tables-div').html('<span style="color: #999999; line-height: 36px">暂无数据</span>');
            }
            // 单表备份
            else if (1 == value && currentDatabase) {
                // 获取表信息
                let properties = [[${data}]];
                properties.database = currentDatabase;
                $.ajax({
                    url: '/backup/node/info/listTables',
                    data: JSON.stringify(properties),
                    dataType: 'json',
                    contentType: "application/json;charset=utf-8",
                    type: 'post',
                    success: function (result) {
                        let tables = result.data;
                        if (0 < tables.length) {
                            $('.tables-div').html('');
                            for (let i = 0, len = tables.length; i < len; i++) {
                                $('.tables-div').append('<input type="checkbox" value="' + tables[i] + '" title="' + tables[i] + '">');
                            }
                            form.render("checkbox");
                        }
                    },
                });
            }
        })


        step.render({
            elem: '#stepForm',
            filter: 'stepForm',
            width: '100%',
            // stepWidth: '600px',
            height: '600px',
            stepItems: [{
                title: '连接信息'
            }, {
                title: '选择数据库'
            }, {
                title: '备份参数'
            }, {
                title: '完成'
            }]
        });

        form.on('submit(formStep)', function (data) {
            step.next('#stepForm');
            // 第二步
            let form2 = form.val("form2");
            if (1 == form2.backupType) {
                let tables = [];
                // 获取选中的表格
                $('.tables-div input[type=checkbox]:checked').each(function () {
                    tables.push($(this).val());
                });
                if (0 == tables.length) {
                    layer.msg('请选择需要备份的数据表', {icon: 2})
                    return false
                }
            }
            return false;
        });

        form.on('submit(formStep2)', function (data) {
            let form2 = form.val("form2");
            if (1 == form2.backupType) {
                let tables = [];
                // 获取选中的表格
                $('.tables-div input[type=checkbox]:checked').each(function () {
                    tables.push($(this).val());
                });
                if (0 == tables.length) {
                    layer.msg('请选择需要备份的数据表', {icon: 2})
                    return false
                }
            }
            step.next('#stepForm');
            return false;
        });


        // 备份方式选择
        form.on('radio(categoryEnum)', function (data) {
            let value = data.value;
            // 自动备份
            if('AUTO' == value){
                $('.auto-backup').removeClass('hidden');
            }
            // 手动备份
            else {
                $('.auto-backup').addClass('hidden');
            }
        })


        // 监听提交
        form.on('submit(saveBtn)', function (res) {
            const data = res.field;
            // 表单2
            let form2 = form.val("form2");
            for (let i in form2) {
                data[i] = form2[i]
            }
            // 表单3
            let form3 = form.val("form3");
            for (let i in form3) {
                data[i] = form3[i]
            }
            // 数据库连接信息id
            let properties = [[${data}]];
            data.nodeId = properties.id;
            if (!data.database) {
                layer.msg('请选择需要备份的数据库', {icon: 2})
                return false
            }
            // 单表备份
            if (1 == data.backupType) {
                let tables = [];
                // 获取选中的表格
                $('.tables-div input[type=checkbox]:checked').each(function () {
                    tables.push($(this).val());
                });
                if (0 == tables.length) {
                    layer.msg('请选择需要备份的数据表', {icon: 2})
                    return false
                }
                data.tables = tables
            }
            // 自动备份
            if('AUTO' == data.categoryEnum && !data.cron) {
                layer.msg('请选择定时时间', {icon: 2})
                return false
            }
            // 启动状态
            if(1 == data.status) {
                data.status = true
            }
            else {
                data.status = false
            }
            // 是否压缩
            if(!data.isCompress) {
                data.isCompress = false
            }
            // 是否上传
            if(!data.isUpload) {
                data.isUpload = false
            }
            // 是否删除
            if(!data.isDelete) {
                data.isDelete = false
            }
            // 导出方式
            if(!data.structure && !data.data) {
                layer.msg('请至少选择一种导出方式', {icon: 2})
                return false
            }
            // 表结构
            if(data.structure) {
                if(!data.data) {
                    data.dataType = 0
                }
            }
            // 表数据
            else {
                data.dataType = 1
            }
            // 请求备份
            $.ajax({
                url: '/backup/node/info/saveBackUp',
                data: JSON.stringify(data),
                dataType: 'json',
                contentType: "application/json;charset=utf-8",
                type: 'post',
                success: function (result) {
                    if (result.code === 200) {
                        layer.msg(result.message, {icon: 1, time: 1800});
                        step.next('#stepForm');
                    }else {
                        layer.msg(result.message, {icon: 2});
                    }
                },
            });
            return false;
        });

        $('.pre').click(function () {
            step.pre('#stepForm');
            return false;
        });

        $('.repeat-backup').click(function () {
            location.reload();
        })

        $('.close-page').click(function () {
            const windowIndex = parent.layer.getFrameIndex(window.name);
            parent.layer.close(windowIndex);
        })

        $('.next').click(function () {
            step.next('#stepForm');
            return false;
        });
    })
</script>
</body>
</html>
